<template>
  <div>
    <!-- 默认get请求，数据会在url上 -->
    <form class="mui-input-group">
      <h3>注册</h3>
      <div class="mui-input-row">
        <label>用户名</label>
        <input
          type="text"
          class="mui-input-clear"
          placeholder="请输入用户名"
          data-input-clear="5"
          @focus="focus"
        >
        <span class="mui-icon mui-icon-clear mui-hidden"></span>
      </div>
      <p>{{ username_error_msg }}</p>
      <div class="mui-input-row mui-password">
        <label>密码</label>
        <input
          type="password"
          class="mui-input-password"
          placeholder="请输入密码"
          data-input-password="3"
          @focus="focus"
        >
        <span class="mui-icon mui-icon-eye"></span>
      </div>
      <p>{{ pass_error_msg }}</p>
      <div class="mui-input-row mui-password">
        <label>确认密码</label>
        <input
          type="password"
          class="mui-input-password"
          placeholder="请再次输入密码"
          data-input-password="3"
          @focus="focus"
        >
        <span class="mui-icon mui-icon-eye"></span>
      </div>
      <p>{{ confirm_error_msg }}</p>
      <div class="mui-button-row">
        <button
          type="submit"
          class="mui-btn mui-btn-primary mui-btn-outlined"
          onclick="return false;"
          @click="register"
        >注册</button>&nbsp;&nbsp;
        <button
          type="reset"
          class="mui-btn mui-btn-default"
          onclick="return false;"
          @click="reset"
        >重置</button>
      </div>
      <div class="mui-button-row register">
        <span>已有账号</span>
        <router-link to="/member/login" tag="a">点击登录</router-link>
      </div>
    </form>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      title: "注册",
      username_error_msg: "",
      pass_error_msg: "",
      confirm_error_msg: "",
      registerList: [],
      timerId:""
    };
  },
  created() {
    this.show(this.title);
    // this.getRegisterList();
  },
  mounted() {
    mui(".mui-input-row input").input();
  },
  methods: {
    show(title) {
      this.$emit("getTitle", title);
    },
    focus() {
      this.username_error_msg = "";
      this.pass_error_msg = "";
      this.confirm_error_msg = "";
    },
    register() {
      clearTimeout(this.timerId);
      var username = mui(".mui-input-group input")[0].value;
      var password = mui(".mui-input-group input")[1].value;
      var confirmPass = mui(".mui-input-group input")[2].value;
      if (!username || username.trim() == "")
        return (this.username_error_msg = "用户名不能为空");
      var list = JSON.parse(localStorage.getItem("register")) || [];
      var flag = false;
      list.some(ele => {
        if (ele.name == username) {
          this.username_error_msg = "该用户名已经注册";
          flag = true;
          return true;
        }
      });

      if (!flag) {
        if (!password || password.trim() == "")
          return (this.pass_error_msg = "密码不能为空");
        if (!confirmPass || confirmPass.trim() == "")
          return (this.confirm_error_msg = "再次输入密码确认");
        if (password !== confirmPass)
          return (this.confirm_error_msg = "两次输入的密码不一致");
        var obj = { name: username, pass: password };
        // console.log(list.push(obj)) 返回的是数组的长度，console.log(list)才能得到push之后的新数组
        // console.log(list.push(obj));
        list.push(obj);
        localStorage.setItem("register", JSON.stringify(list));
        mui.alert("恭喜你，注册成功")
        this.timerId = setTimeout(()=>{
          this.$router.push("/member/login")
          // clearTimeout(timerId)
        },600)
      }
    },
    reset() {
      mui(".mui-input-group input").each(function() {
        this.value = "";
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-input-group {
  overflow-y: auto;
  margin: 80px 5px 0;
  padding: 15px 0;
  border-radius: 10px;
  box-shadow: 0 3px 8px #bbb;
  h3 {
    padding: 0 0 15px 15px;
    text-align: center;
  }
  p {
    color: red;
    padding-left: 120px;
    margin-bottom: 0;
  }
  &::after {
    height: 0;
  }
  &::before {
    height: 0;
  }
  .mui-input-row:after {
    height: 0;
  }
  .mui-button-row {
    margin-top: 10px;
    .mui-btn {
      margin: 0 15px;
    }
  }
  .register {
    span,
    a {
      font-size: 14px;
    }
  }
}
</style>